<template>
    <view class="container">
        <!-- 顶部导航栏 -->
        <view class="nav-bar">
            <view class="left">
                <u-icon name="arrow-left" size="32" color="#333" @click="goBack"></u-icon>
            </view>
            <view class="title">问题详情</view>
            <view class="right">
                <u-icon name="more-dot-fill" size="32" color="#333" @click="showMore"></u-icon>
            </view>
        </view>
        
        <!-- 问题内容 -->
        <scroll-view class="content" scroll-y>
            <view class="question">
                <view class="header">
                    <view class="title">{{question.title}}</view>
                    <view class="status" :class="question.status">{{question.statusText}}</view>
                </view>
                
                <view class="info">
                    <view class="user">
                        <image class="avatar" :src="question.avatar" mode="aspectFill"></image>
                        <text>{{question.name}}</text>
                    </view>
                    <view class="meta">
                        <view class="item">
                            <u-icon name="eye" size="24" color="#999"></u-icon>
                            <text>{{question.views}}</text>
                        </view>
                        <view class="item">
                            <u-icon name="message" size="24" color="#999"></u-icon>
                            <text>{{question.answers}}</text>
                        </view>
                        <view class="item">
                            <u-icon name="clock" size="24" color="#999"></u-icon>
                            <text>{{question.time}}</text>
                        </view>
                    </view>
                </view>
                
                <view class="body">
                    <text class="text">{{question.content}}</text>
                    
                    <view class="images" v-if="question.images.length > 0">
                        <image 
                            v-for="(img, index) in question.images" 
                            :key="index"
                            :src="img"
                            mode="aspectFill"
                            @click="previewImage(question.images, index)"
                        ></image>
                    </view>
                </view>
            </view>
            
            <!-- 回答列表 -->
            <view class="answers">
                <view class="title">全部回答（{{answers.length}}）</view>
                
                <view 
                    class="answer-item" 
                    v-for="(item, index) in answers" 
                    :key="index"
                >
                    <view class="header">
                        <view class="user">
                            <image class="avatar" :src="item.avatar" mode="aspectFill"></image>
                            <view class="info">
                                <text class="name">{{item.name}}</text>
                                <text class="title">{{item.title}}</text>
                            </view>
                        </view>
                        <view class="actions">
                            <view class="action" @click="likeAnswer(item)">
                                <u-icon 
                                    :name="item.liked ? 'heart-fill' : 'heart'" 
                                    size="24" 
                                    :color="item.liked ? '#FF4D4F' : '#999'"
                                ></u-icon>
                                <text>{{item.likes}}</text>
                            </view>
                            <view class="action" @click="replyAnswer(item)">
                                <u-icon name="message" size="24" color="#999"></u-icon>
                                <text>回复</text>
                            </view>
                        </view>
                    </view>
                    
                    <view class="content">{{item.content}}</view>
                    
                    <view class="images" v-if="item.images.length > 0">
                        <image 
                            v-for="(img, imgIndex) in item.images" 
                            :key="imgIndex"
                            :src="img"
                            mode="aspectFill"
                            @click="previewImage(item.images, imgIndex)"
                        ></image>
                    </view>
                    
                    <view class="time">{{item.time}}</view>
                    
                    <!-- 回复列表 -->
                    <view class="replies" v-if="item.replies.length > 0">
                        <view 
                            class="reply-item" 
                            v-for="(reply, replyIndex) in item.replies" 
                            :key="replyIndex"
                        >
                            <view class="user">
                                <text class="name">{{reply.name}}</text>
                                <text class="title">{{reply.title}}</text>
                            </view>
                            <view class="content">{{reply.content}}</view>
                            <view class="time">{{reply.time}}</view>
                        </view>
                    </view>
                </view>
                
                <!-- 加载更多 -->
                <view class="loading" v-if="loading">
                    <view class="loading-icon"></view>
                    <text>加载中...</text>
                </view>
                
                <!-- 没有更多 -->
                <view class="no-more" v-if="!hasMore">
                    <text>没有更多了</text>
                </view>
                
                <!-- 空状态 -->
                <view class="empty" v-if="answers.length === 0">
                    <image src="/static/images/empty.png" mode="aspectFit"></image>
                    <text>暂无回答</text>
                </view>
            </view>
        </scroll-view>
        
        <!-- 底部输入栏 -->
        <view class="input-bar">
            <view class="input-box">
                <input 
                    type="text" 
                    v-model="inputText" 
                    placeholder="写下你的回答..."
                    @confirm="submitAnswer"
                />
                <view class="actions">
                    <view class="action" @click="chooseImage">
                        <u-icon name="photo" size="32" color="#999"></u-icon>
                    </view>
                    <view class="action" @click="submitAnswer">
                        <text>发送</text>
                    </view>
                </view>
            </view>
            
            <view class="images" v-if="images.length > 0">
                <view 
                    class="image-item" 
                    v-for="(item, index) in images" 
                    :key="index"
                >
                    <image :src="item" mode="aspectFill"></image>
                    <view class="delete" @click="deleteImage(index)">
                        <u-icon name="close" size="24" color="#fff"></u-icon>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            question: {
                id: 1,
                title: '高血压患者应该如何控制饮食？',
                content: '我今年45岁，最近被诊断出高血压，医生建议我控制饮食，请问具体应该注意哪些方面？',
                status: 'answered',
                statusText: '已解答',
                name: '张先生',
                avatar: '/static/images/avatar.png',
                time: '2024-03-20',
                views: 128,
                answers: 5,
                images: []
            },
            answers: [
                {
                    id: 1,
                    name: '李医生',
                    title: '心血管内科主任医师',
                    avatar: '/static/images/doctor.png',
                    content: '高血压患者饮食控制非常重要，建议从以下几个方面入手：\n1. 控制钠盐摄入，每日不超过6g\n2. 增加钾的摄入，多吃新鲜蔬果\n3. 控制总热量，保持理想体重\n4. 限制饮酒，戒烟\n5. 均衡饮食，保证营养全面',
                    time: '2024-03-20 10:30',
                    likes: 25,
                    liked: false,
                    images: [],
                    replies: [
                        {
                            name: '王医生',
                            title: '营养科主治医师',
                            content: '补充一点，建议多吃富含膳食纤维的食物，如全谷物、豆类等。',
                            time: '2024-03-20 11:00'
                        }
                    ]
                }
            ],
            loading: false,
            hasMore: true,
            inputText: '',
            images: []
        }
    },
    onLoad(options) {
        // 获取问题详情
        this.getQuestionDetail(options.id)
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        showMore() {
            uni.showActionSheet({
                itemList: ['分享', '举报'],
                success: (res) => {
                    if (res.tapIndex === 0) {
                        // 分享
                    } else if (res.tapIndex === 1) {
                        // 举报
                    }
                }
            })
        },
        getQuestionDetail(id) {
            // 模拟获取问题详情
        },
        previewImage(images, current) {
            uni.previewImage({
                urls: images,
                current
            })
        },
        likeAnswer(answer) {
            answer.liked = !answer.liked
            answer.likes += answer.liked ? 1 : -1
        },
        replyAnswer(answer) {
            this.inputText = `@${answer.name} `
        },
        chooseImage() {
            uni.chooseImage({
                count: 9 - this.images.length,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.images = [...this.images, ...res.tempFilePaths]
                }
            })
        },
        deleteImage(index) {
            this.images.splice(index, 1)
        },
        submitAnswer() {
            if (!this.inputText.trim() && this.images.length === 0) {
                uni.showToast({
                    title: '请输入回答内容或上传图片',
                    icon: 'none'
                })
                return
            }
            
            // 模拟提交
            uni.showLoading({
                title: '提交中...'
            })
            
            setTimeout(() => {
                this.answers.unshift({
                    id: this.answers.length + 1,
                    name: '我',
                    title: '患者',
                    avatar: '/static/images/avatar.png',
                    content: this.inputText,
                    time: '刚刚',
                    likes: 0,
                    liked: false,
                    images: this.images,
                    replies: []
                })
                
                this.inputText = ''
                this.images = []
                
                uni.hideLoading()
                uni.showToast({
                    title: '提交成功',
                    icon: 'success'
                })
            }, 1000)
        }
    }
}
</script>

<style lang="scss">
.container {
    min-height: 100vh;
    background-color: #F7F7FA;
    
    .nav-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 30rpx;
        background-color: #fff;
        
        .title {
            font-size: 36rpx;
            font-weight: bold;
            color: #333;
        }
    }
    
    .content {
        height: calc(100vh - 200rpx);
        
        .question {
            background-color: #fff;
            padding: 30rpx;
            margin-bottom: 20rpx;
            
            .header {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;
                
                .title {
                    flex: 1;
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                    margin-right: 20rpx;
                }
                
                .status {
                    font-size: 24rpx;
                    padding: 4rpx 12rpx;
                    border-radius: 20rpx;
                    
                    &.answered {
                        color: #52C41A;
                        background-color: #F6FFED;
                    }
                    
                    &.pending {
                        color: #FAAD14;
                        background-color: #FFFBE6;
                    }
                }
            }
            
            .info {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: 20rpx;
                
                .user {
                    display: flex;
                    align-items: center;
                    
                    .avatar {
                        width: 40rpx;
                        height: 40rpx;
                        border-radius: 50%;
                        margin-right: 10rpx;
                    }
                    
                    text {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
                
                .meta {
                    display: flex;
                    
                    .item {
                        display: flex;
                        align-items: center;
                        margin-left: 20rpx;
                        
                        text {
                            font-size: 24rpx;
                            color: #999;
                            margin-left: 10rpx;
                        }
                    }
                }
            }
            
            .body {
                .text {
                    font-size: 28rpx;
                    color: #666;
                    line-height: 1.6;
                }
                
                .images {
                    display: flex;
                    flex-wrap: wrap;
                    margin: 20rpx -10rpx 0;
                    
                    image {
                        width: 200rpx;
                        height: 200rpx;
                        margin: 0 10rpx 20rpx;
                        border-radius: 10rpx;
                    }
                }
            }
        }
        
        .answers {
            background-color: #fff;
            padding: 30rpx;
            
            .title {
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 20rpx;
            }
            
            .answer-item {
                padding: 30rpx 0;
                border-bottom: 2rpx solid #F7F7FA;
                
                &:last-child {
                    border-bottom: none;
                }
                
                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-bottom: 20rpx;
                    
                    .user {
                        display: flex;
                        align-items: center;
                        
                        .avatar {
                            width: 60rpx;
                            height: 60rpx;
                            border-radius: 50%;
                            margin-right: 20rpx;
                        }
                        
                        .info {
                            display: flex;
                            flex-direction: column;
                            
                            .name {
                                font-size: 28rpx;
                                color: #333;
                                margin-bottom: 4rpx;
                            }
                            
                            .title {
                                font-size: 24rpx;
                                color: #999;
                            }
                        }
                    }
                    
                    .actions {
                        display: flex;
                        
                        .action {
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            margin-left: 30rpx;
                            
                            text {
                                font-size: 24rpx;
                                color: #999;
                                margin-top: 4rpx;
                            }
                        }
                    }
                }
                
                .content {
                    font-size: 28rpx;
                    color: #666;
                    line-height: 1.6;
                    margin-bottom: 20rpx;
                }
                
                .images {
                    display: flex;
                    flex-wrap: wrap;
                    margin: 0 -10rpx 20rpx;
                    
                    image {
                        width: 200rpx;
                        height: 200rpx;
                        margin: 0 10rpx 20rpx;
                        border-radius: 10rpx;
                    }
                }
                
                .time {
                    font-size: 24rpx;
                    color: #999;
                    margin-bottom: 20rpx;
                }
                
                .replies {
                    background-color: #F7F7FA;
                    border-radius: 10rpx;
                    padding: 20rpx;
                    
                    .reply-item {
                        padding: 20rpx 0;
                        border-bottom: 2rpx solid #eee;
                        
                        &:last-child {
                            border-bottom: none;
                            padding-bottom: 0;
                        }
                        
                        .user {
                            display: flex;
                            align-items: center;
                            margin-bottom: 10rpx;
                            
                            .name {
                                font-size: 28rpx;
                                color: #333;
                                margin-right: 10rpx;
                            }
                            
                            .title {
                                font-size: 24rpx;
                                color: #999;
                            }
                        }
                        
                        .content {
                            font-size: 28rpx;
                            color: #666;
                            line-height: 1.6;
                            margin-bottom: 10rpx;
                        }
                        
                        .time {
                            font-size: 24rpx;
                            color: #999;
                            margin-bottom: 0;
                        }
                    }
                }
            }
            
            .loading, .no-more {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 30rpx 0;
                
                .loading-icon {
                    width: 36rpx;
                    height: 36rpx;
                    border: 3rpx solid #1890FF;
                    border-radius: 50%;
                    border-top-color: transparent;
                    animation: loading-rotate 0.8s linear infinite;
                }
                
                @keyframes loading-rotate {
                    0% {
                        transform: rotate(0deg);
                    }
                    100% {
                        transform: rotate(360deg);
                    }
                }
                
                text {
                    font-size: 24rpx;
                    color: #999;
                    margin-left: 10rpx;
                }
            }
            
            .empty {
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 100rpx 0;
                
                image {
                    width: 200rpx;
                    height: 200rpx;
                    margin-bottom: 20rpx;
                }
                
                text {
                    font-size: 28rpx;
                    color: #999;
                }
            }
        }
    }
    
    .input-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
        padding: 20rpx 30rpx;
        box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
        
        .input-box {
            display: flex;
            align-items: center;
            
            input {
                flex: 1;
                height: 60rpx;
                background-color: #F7F7FA;
                border-radius: 30rpx;
                padding: 0 30rpx;
                font-size: 28rpx;
                color: #333;
                margin-right: 20rpx;
            }
            
            .actions {
                display: flex;
                align-items: center;
                
                .action {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 60rpx;
                    height: 60rpx;
                    margin-left: 20rpx;
                    
                    text {
                        font-size: 28rpx;
                        color: #1890FF;
                    }
                }
            }
        }
        
        .images {
            display: flex;
            flex-wrap: wrap;
            margin: 20rpx -10rpx 0;
            
            .image-item {
                position: relative;
                width: 120rpx;
                height: 120rpx;
                margin: 0 10rpx 20rpx;
                
                image {
                    width: 100%;
                    height: 100%;
                    border-radius: 10rpx;
                }
                
                .delete {
                    position: absolute;
                    top: -10rpx;
                    right: -10rpx;
                    width: 40rpx;
                    height: 40rpx;
                    background-color: rgba(0, 0, 0, 0.5);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }
            }
        }
    }
}
</style> 